<template>
  <view class="ul">
    <uni-popup ref="popupRef">
      <view class="popup-context">
        {{ formulaText }}
      </view>
    </uni-popup>

    <view v-for="(item, index) in list" :key="index" class="li">
      <view class="title">{{ item.title }}</view>
      <view class="des">{{ item.des }}</view>
      <view class="action">
        <view class="formula action-item">
          <button class="but" @click="formulaButClick()">实战</button>
        </view>
        <view class="practice action-item">
          <button class="but" @click="practiceButClick(item)">练习</button>
        </view>
      </view>
    </view>
  </view>
</template>

<script setup lang="ts">
import { ref } from 'vue'

import { useDataAnalysisStore } from '@/store'

import type { TopicConfig } from '../types/topic'

import { deviationMatch, generateRandomNumbersWithError } from '@/utils/match'

const dataAnalysisStore = useDataAnalysisStore()

const popupRef = ref()

const formulaText = ref('')

/**
 * 公式
 */
const formulaButClick = () => {
  uni.showToast({
    title: '暂未开发',
    icon: 'none',
  })
}

/**
 * 练习
 */
const practiceButClick = (item: any) => {
  uni.navigateTo({
    url: `/pages/data-analysis/practice`,
    success() {
      uni.$emit('dataAnalysisSPractice', {
        config: item,
        generateTopicNumber: 10,
        correctness: 0,
      })
    },
  })

  dataAnalysisStore.topic.config = item
}

const list = ref<Array<TopicConfig>>([
  // {
  //   type: 'js',
  //   title: '求基期量',
  //   des: '求基期量是指确定一个起始时间点上的某种事物的数量。基期量在统计学中作为一个基数存在，通常用作后续时期数据的参照点，用于计算增长率等。',
  //   formula: `基期量 = 现期量 / (1 + 增长率)`,
  //   deviation: 0.03,
  //   generateTopic: () => {
  //     const num1 = Math.floor(Math.random() * (1000 - 100 + 1)) + 100
  //     const num2 = Math.floor(Math.random() * (100 - 1 + 1)) + 1
  //     return {
  //       topic: `${num1} / (1 + ${num2}%) = ?`,
  //       answer: (num1 / (1 + num2 / 100)).toFixed(2),
  //       ok: false,
  //     }
  //   },
  // },
  {
    type: 'js',
    title: '估算前期量',
    des: '基期比重是指在两个时间段内，某一指标在第一期（即基期）的值在整个指标中所占的比例。',
    deviation: 0.03,
    generateTopic: () => {
      const num1 = Math.floor(Math.random() * (10000 - 1000 + 1)) + 1000
      const num2 = Math.random() * 1.2 - 0.6
      const num3 = num2 + 1
      return {
        topic: `${num1} / ${num3.toFixed(3)}`,
        answer: (num1 / num3).toFixed(2),
        ok: false,
        tip: `现期: ${num1}  增长率: ${(num2 * 100).toFixed(1)}%`,
      }
    },
    computed: (e: { answer: string; youAnswer: number; deviation: number }) => {
      const answer = parseFloat(e.answer)
      return deviationMatch(e.youAnswer, answer, e.deviation)
    },
  },
  {
    type: 'js',
    title: '估算增长量',
    des: '',
    deviation: 0.03,
    generateTopic: () => {
      const num1 = Math.floor(Math.random() * (1000 - 100 + 1)) + 100
      const num2 = Math.floor(Math.random() * (100 - 1 + 1)) + 1
      return {
        topic: `${num1} x (1 + ${num2}%) = ?`,
        answer: (num1 * (1 + num2 / 100)).toFixed(1),
        ok: false,
      }
    },
    computed: (e: { answer: string; youAnswer: number; deviation: number }) => {
      const answer = parseFloat(e.answer)
      return deviationMatch(e.youAnswer, answer, e.deviation)
    },
  },

  {
    type: 'js',
    title: '百分化计算',
    des: '',
    deviation: 0.03,
    generateTopic: () => {
      const num1 = 1
      const num2 = Math.floor(Math.random() * (20 - 2 + 1) + 2)
      return {
        topic: `${num1} / ${num2} = ? %`,
        answer: ((num1 / num2) * 100).toFixed(1) + '%',
        ok: false,
      }
    },
    computed: (e: { answer: string; youAnswer: number; deviation: number }) => {
      const answer = parseFloat(e.answer)
      return deviationMatch(e.youAnswer, answer, e.deviation)
    },
  },
  {
    type: 'js',
    title: '分数计算(分子 > 分母)',
    des: '建议保留小数点2~3位',
    deviation: 0.03,
    generateTopic: () => {
      const fm = Math.floor(Math.random() * (1000 - 100 + 1) + 100)
      const fz = Math.floor(Math.random() * (1000 - fm + 1) + fm)
      return {
        topic: `${fz} / ${fm} = ?`,
        answer: (fz / fm).toFixed(3),
        ok: false,
      }
    },
    computed: (e: { answer: string; youAnswer: number; deviation: number }) => {
      const answer = parseFloat(e.answer)
      return deviationMatch(e.youAnswer, answer, e.deviation)
    },
  },
  {
    type: 'js',
    title: '分数计算(分子 < 分母)',
    des: '建议保留小数点2~3位',
    deviation: 0.03,
    generateTopic: () => {
      const fz = Math.floor(Math.random() * (1000 - 100 + 1) + 100)
      const fm = Math.floor(Math.random() * (1000 - fz + 1) + fz)
      return {
        topic: `${fz} / ${fm} = ?`,
        answer: (fz / fm).toFixed(3),
        ok: false,
      }
    },
    computed: (e: { answer: string; youAnswer: number; deviation: number }) => {
      const answer = parseFloat(e.answer)
      return deviationMatch(e.youAnswer, answer, e.deviation)
    },
  },
  {
    type: 'bj',
    title: '分数比较',
    des: '建议保留小数点2~3位',
    generateTopic: () => {
      const fm = Math.floor(Math.random() * (1000 - 100 + 1) + 100)
      const fm1 = Math.floor(fm * (1 + Math.random() * 0.2 - 0.1))
      const fz = Math.floor(Math.random() * (1000 - fm + 1) + fm)
      const fz1 = Math.floor(fz * (1 + Math.random() * 0.2 - 0.1))

      const res1 = fz / fm
      const res2 = fz1 / fm1

      return {
        topic: ` <div style="display: flex; align-items: center; font-size: 1rem">
      <div style="display: flex; align-items: center">
        <div
          style="
            display: flex;
            flex-direction: column;
            align-items: center;
            justify-content: center;
          "
        >
          <div>${fm}</div>
          <div style="width: 50px; height: 2px; background-color: #000"></div>
          <div>${fz}</div>
        </div>
      </div>
      <div style="margin: 0 10px">?</div>
      <div style="display: flex; align-items: center">
        <div
          style="
            display: flex;
            flex-direction: column;
            align-items: center;
            justify-content: center;
          "
        >
          <div>${fm1}</div>
          <div style="width: 50px; height: 2px; background-color: #000"></div>
          <div>${fz1}</div>
        </div>

      </div>
    </div>`,
        answer: res1 > res2 ? '大于' : '小于',
        ok: false,
      }
    },
    computed: (e: { answer: string; youAnswer: any; deviation: number }) => {
      const { answer, youAnswer } = e
      return answer === youAnswer
    },
  },

  {
    type: 'bj',
    title: '增量比大小',
    des: '',
    deviation: 0,
    generateTopic: () => {
      const num1 = Math.floor(Math.random() * (1000 - 100 + 1)) + 100
      const num2 = Math.random() * (0.2 - 0.02) + 0.02

      const res1 = generateRandomNumbersWithError({
        baseValue: num1,
        minError: 0.01,
        maxError: 0.2,
      })
      const res2 = generateRandomNumbersWithError({
        baseValue: num2 * 100,
        minError: 1,
        maxError: 2,
      })

      console.log(res1, res2)

      const rFm = res1.value1
      const rFz = res2.value2 / 100 + 1
      const rc = res2.value2

      const lFm = res1.value2
      const lFz = res2.value1 / 100 + 1
      const lc = res2.value1
      return {
        topic: `
        <div style="display: flex; align-items: center; font-size: 0.9rem">
      <div style="display: flex; align-items: center">
        <div
          style="
            display: flex;
            flex-direction: column;
            align-items: center;
            justify-content: center;
          "
        >
          <div>${Math.floor(rFm)}</div>
          <div style="width: 50px; height: 2px; background-color: #000"></div>
          <div>${rFz.toFixed(3)}</div>
        </div>
        <div style="margin-left: 5px">x ${rc.toFixed(1)}%</div>
      </div>
      <div style="margin: 0 10px">?</div>
      <div style="display: flex; align-items: center">
        <div
          style="
            display: flex;
            flex-direction: column;
            align-items: center;
            justify-content: center;
          "
        >
          <div>${Math.floor(lFm)}</div>
          <div style="width: 50px; height: 2px; background-color: #000"></div>
          <div>${lFz.toFixed(3)}</div>
        </div>
        <div style="margin-left: 5px">x ${lc.toFixed(1)}%</div>
      </div>
    </div>
          `,
        answer: (rFm / rFz) * rc > (lFm / lFz) * lc ? '大于' : '小于',
        ok: false,
        tip: ``,
      }
    },
    computed: (e: { answer: string; youAnswer: number; deviation: number }) => {
      const answer = parseFloat(e.answer)
      return deviationMatch(e.youAnswer, answer, e.deviation)
    },
  },
])
</script>
<style lang="scss" scoped>
.ul {
  width: 100%;
  height: 100%;

  .popup-context {
    width: 500rpx;
    height: 500rpx;
    background-color: #fff;
    border-radius: 20rpx;
  }

  .li {
    width: 100%;
    height: auto;
    background-color: #fff;
    border-radius: 20rpx;
    margin-bottom: 40rpx;
    box-sizing: border-box;
    padding: 20rpx 30rpx;

    .title {
      width: 100%;
      font-weight: 700;
      font-size: 1.25rem;
    }
    .des {
      color: #71777d;
      padding: 20rpx 0;
    }

    .action {
      width: 100%;
      display: flex;
      justify-content: center;
      margin-top: 30rpx;

      .action-item {
        margin: 0 30rpx;

        .but {
          display: flex;
          align-items: center;
          justify-content: center;
          font-size: 1rem;
        }
      }

      .formula {
        > button {
          width: 200rpx;
          height: 70rpx;
          display: flex;
          align-items: center;
          justify-content: center;
        }
      }

      .practice {
        > button {
          width: 200rpx;
          height: 70rpx;
          display: flex;
          align-items: center;
          justify-content: center;
          background-color: #367cf1;
          color: #fff;
        }
      }
    }
  }
}
</style>
